<template>
  <div>
    <h1>less - 样式处理</h1>
    <div class="demo"></div>
    
    <hr>
    <div class="fa"> 
       31313132
    </div>
    <div class="test"> 
       <div class="son"></div>
    </div>
    
  </div>
</template>
<script>
export default {

}
</script>
<style lang="less">
// 
@color: green;
.box(@w,@h) {
  width: @w;
  height: @h;
}
.bg(@bg) {
  background: @bg;
}
.w(@px) {
  // unit(3, rem) = 3rem
  //  unit(3, px) = 3px
  width: unit((@px/3.75), rem);
}
.demo {
  // width: 50rem;
  // width: 187.5px;
  .w(187.5);
  height: 200px;
  background: limegreen;
}

.fa {
  // width: 200px;
  // height: 200px;
  .box(300px,300px);
  // background: @color;
  .bg(red)
}
.test {
  // width: 200px;
  // height: 200px;
  .box(200px,200px);
  // background: @color;
  .bg(skyblue);
  .son {
      width: 100px;
      height: 100px;
      background: pink;
      border: 1px * 5 solid red;
  }
}
</style>